<template>
	<!-- 列表样式 -->
	<view class="p-2">
		<!-- 头像昵称 | 关注按钮 -->
		<view class="flex align-center justify-between">
			<!-- 头像昵称 -->
			<view class="flex align-center">
				<!-- 头像 -->
				<image :src="item.userpic" @click="openSpac" class="mr-2 rounded-circle"
					style="width: 65rpx; height: 65rpx;" lazy-load></image>
				<!-- 昵称发布时间 -->
				<view>
					<view class="font" style=" line-height: 1.5;">{{item.username}}</view>
					<text style="color: #9d9589;">{{item.newstime}}</text>
				</view>
			</view>
			<view @click="follow" v-if="!item.isFollow"
				class="flex align-center justify-center rounded bg-main animated faster"
				style="width: 90rpx; height: 50rpx; color: #ffffff;" hover-class="pulse">
				关注
			</view>
		</view>
		<!-- 标题 -->
		<view class="font my-1" @click="openDetail">
			{{item.title}}
		</view>
		<!-- 图片 -->
		<image v-if="item.titlepic" :src="item.titlepic" @click="openDetail" class="rounded w-100"
			style="height: 350rpx;"></image>
		<!-- 图标按钮 -->
		<view class="flex align-center ">
			<!-- 顶 -->
			<view class="flex align-center justify-center flex-1 animated faster" hover-class="jello text-main"
				@click="doSupport('support')" :class="item.support.type === 'support' ? 'support-active' : ''">
				<text class="iconfont icon-dianzan2 mr-2 "></text>
				<text>{{item.support.support_count > 0 ? item.support.support_count : '支持' }}</text>
			</view>
			<!-- 踩 -->
			<view class="flex align-center justify-center flex-1 animated faster" hover-class="jello text-main"
				@click="doSupport('unsupport')" :class="item.support.type === 'unsupport' ? 'support-active' : ''">
				<text class="iconfont icon-cai mr-2"></text>
				<text>{{item.support.unsupport_count > 0 ? item.support.unsupport_count : '踩'}}</text>
			</view>
			<!-- 评论 -->
			<view class="flex align-center justify-center flex-1 animated faster" hover-class="jello text-main"
				@click="doSupport">
				<text class="iconfont icon-pinglun2 mr-2"></text>
				<text>{{item.comment_count > 0 ? item.comment_count :'评论'}}</text>
			</view>
			<!-- 分享 -->
			<view class="flex align-center justify-center flex-1 animated faster" hover-class="jello text-main"
				@click="doSupport">
				<text class="iconfont icon-fenxiang mr-2"></text>
				<text>{{item.share_num > 0 ? item.share_num : '分享'}}</text>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: Object,
			index: Number
		},
		data() {
			return {

			}
		},
		methods: {
			// 打开个人空间
			openSpac() {
				console.log('打开个人空间')
			},
			// 关注
			follow() {
				//通知父组件
				this.$emit("follow", this.index)
			},
			// 进入详情页
			openDetail() {
				console.log('进入详情页')
			},
			// 顶踩操作
			doSupport(type) {
				// 通知父组件
				this.$emit('doSupport', {
					type,
					index: this.index
				})
			}
		}
	}
</script>

<style>
	.support-active {
		color: #FF4A6A;
	}
</style>